<template>
    <div id="roles" v-loading="loading">
        <!-- 面包导航 -->
        <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片主体 -->
        <el-card class="box-card">
            <div class="block">
                <!-- 节点过滤 -->
                <el-row>
                    <el-col :span="16">
                        <div class="grid-content bg-purple">
                            <el-input placeholder="输入关键字进行过滤" v-model="filterText" clearable></el-input>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-purple-light">
                            <el-button type="primary" icon="el-icon-plus" style="margin-left:20px;" @click="openParentAdd">父级</el-button>
                        </div>
                    </el-col>
                </el-row>
                <p style="margin: 15px"></p>
                <el-tree
                        :data="data"
                        accordion
                        :auto-expand-parent="false"
                        node-key="id"
                        show-checkbox
                        :default-expanded-keys="open"
                        :expand-on-click-node="false"
                        :render-content="renderContent"
                        :props="defaultProps"
                        highlight-current
                        :filter-node-method="filterNode"
                        ref="tree"
                ></el-tree>
            </div>
        </el-card>


      <!-- 节点新增弹出框 -->
      <el-dialog :title="addTitle" :visible.sync="addDialogVisible" @close="addClose" width="50%">
        <span>
          <el-form size="mini" ref="addFormRef" :model="addForm" label-width="80px" :rules="addFormRules">
            <el-form-item label="节点名称" prop="menuName">
              <el-input v-model="addForm.menuName"></el-input>
            </el-form-item>
            <el-form-item label="URL">
              <el-input v-model="addForm.url"></el-input>
            </el-form-item>
            <el-form-item label="权限编码">
              <el-input v-model="addForm.perms"></el-input>
            </el-form-item>
            <el-form-item label="图标">
              <el-input v-model="addForm.icon"></el-input>
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-model="addForm.orderNum"></el-input>
            </el-form-item>
            <el-form-item label="是否可用" prop="disabled">
              <template>
                <el-radio v-model="addForm.disabled" label="false">可用</el-radio>
                <el-radio v-model="addForm.disabled" label="true">禁用</el-radio>
              </template>
            </el-form-item>
            <el-form-item label="是否展开" prop="open">
              <template>
                <el-radio v-model="addForm.open" label="1">展开</el-radio>
                <el-radio v-model="addForm.open" label="0">关闭</el-radio>
              </template>
            </el-form-item>
            <el-form-item label="类型" prop="type">
              <template>
                <el-radio v-model="addForm.type" label="0">菜单</el-radio>
                <el-radio v-model="addForm.type" label="1">按钮</el-radio>
              </template>
            </el-form-item>
          </el-form>
        </span>
        <div style="text-align: center;">
          <el-button type="primary" @click="addNode" :loading="btnLoading" :disabled="btnDisabled">确 定</el-button>
          <el-button @click="addDialogVisible = false">取 消</el-button>
        </div>
      </el-dialog>


      <!-- 编辑节点弹出框 -->
      <el-dialog :title="editTitle" :visible.sync="editlogVisible" width="50%" @close="editClose">
          <span>
            <el-form size="mini" ref="editFormRef" :model="editForm" label-width="80px" :rules="addFormRules">
              <el-form-item label="节点名称" prop="menuName">
                <el-input v-model="editForm.menuName"></el-input>
              </el-form-item>
              <el-form-item label="URL">
                <el-input v-model="editForm.url"></el-input>
              </el-form-item>
              <el-form-item label="权限编码">
                <el-input v-model="editForm.perms"></el-input>
              </el-form-item>
              <el-form-item label="图标">
                <el-input v-model="editForm.icon"></el-input>
              </el-form-item>
              <el-form-item label="排序">
                <el-input v-model="editForm.orderNum"></el-input>
              </el-form-item>
              <el-form-item label="是否可用" prop="available">
                <template>
                  <el-radio v-model="editForm.available" :label="1">可用</el-radio>
                  <el-radio v-model="editForm.available" :label="0">禁用</el-radio>
                </template>
              </el-form-item>
              <el-form-item label="是否展开" prop="open">
                <template>
                  <el-radio v-model="editForm.open" :label="1">展开</el-radio>
                  <el-radio v-model="editForm.open" :label="0">关闭</el-radio>
                </template>
              </el-form-item>
              <el-form-item label="类型" prop="type">
                <template>
                  <el-radio v-model="editForm.type" :label='"0"'>菜单</el-radio>
                  <el-radio v-model="editForm.type" :label='"1"'>按钮</el-radio>
                </template>
              </el-form-item>
            </el-form>
          </span>
          <div style="text-align: center;">
            <el-button type="primary" @click="updateMenu">确 定</el-button>
            <el-button @click="editlogVisible = false">取 消</el-button>
          </div>
      </el-dialog>

    </div>
</template>

<script>
import menuApi from "@/api/menu"
import { Message } from 'element-ui'
    let id = 1000;
    export default {
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        data() {
            const data = [];
            return {
                btnLoading: false,
                btnDisabled: false,
                loading: true,
                open: [], //展开节点
                filterText: "", //节点过滤文本
                addDialogVisible: false, //新增节点弹出框
                editlogVisible: false, //编辑节点弹出框
                addTitle: "",
                editTitle: "",
                addForm: {
                    parentId: "",
                    menuName: "",
                    url: "",
                    type: "",
                    available: "",
                    open: "",
                    perms: "",
                    orderNum: ""
                }, //添加请求表单数据
                editForm: {}, //编辑节点表单数据
                addFormRules: {
                    menuName: [
                        { required: true, message: "节点名称不能为空", trigger: "blur" },
                        { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
                    ],
                    available: [
                        { required: true, message: "节点状态不能为空", trigger: "blur" }
                    ],
                    orderNum: [
                        { required: true, message: "排序不能为空", trigger: "blur" }
                    ],
                    type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
                    open: [{ required: true, message: "是否展开不能为空", trigger: "blur" }]
                }, //添加表单验证规则
                pNode: {}, //父节点
                data: JSON.parse(JSON.stringify(data)),
                data: JSON.parse(JSON.stringify(data)),
                defaultProps: {
                    children: "children",
                    label: "menuName"
                }
            };
        },
        created() {
            this.getMenuTree();
            setTimeout(() => {
                this.loading = false;
            }, 500);
        },
        methods: {
            //前端添加节点
            append(data, newChild) {
                //   var newChild = { id: 1231, label: "qqqqq", children: [] };
                if (!data.children) {
                    this.$set(data, "children", []);
                }
                data.children.push(newChild);
            },
            remove(node, data) {
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex(d => d.id === data.id);
                children.splice(index, 1);
            },
            //加载菜单树
            async getMenuTree() {
                menuApi.getAllMenu().then(res =>{
                   this.data = res.data.data.tree
                   this.open = res.data.data.open
                })
            },
            //过滤节点
            filterNode(value, data) {
                if (!value) return true;
                return data.menuName.indexOf(value) !== -1;
            },
            //关闭添加
            addClose() {
                this.$refs.addFormRef.clearValidate();
                this.addForm = {};
            },
            editClose() {
                this.$refs.editFormRef.clearValidate();
                this.editForm = {};
            },
            //操作按钮
            renderContent(h, { node, data, store }) {
                return (
                <span class="custom-tree-node">
                  <span>
                    <i class={data.icon}></i>&nbsp;&nbsp;&nbsp;{node.label}
                    {node.data.type == 0 ?  <el-tag style='margin-left:20px;'  effect='plain' size='mini'>菜单</el-tag> :
                    <el-tag style='margin-left:20px;' type='warning' effect='plain' size='mini'>权限  [{node.data.perms}]</el-tag>}
                  </span>
                  <span>
                    <el-button size="mini" type="text" on-click={() => {
                      this.edit(data);
                      return false;
                    }}><i class="el-icon-edit"></i>&nbsp;编辑
                    </el-button>
                    <el-button size="mini" type="text" on-click={() => {
                      this.openAdd(data);
                    }}><i class="el-icon-plus"></i>&nbsp;增加
                    </el-button>
                    <el-button size="mini" type="text" on-click={() => 
                      this.delNode(node, data)
                    }><i class="el-icon-delete"></i>&nbsp;删除
                    </el-button>
                </span>
               </span>
            );
            },
            //打开添加框
            openAdd(data) {
                this.addTitle = "添加节点 ：当前【" + data.menuName + "】";
                this.addDialogVisible = true;
                this.addForm.parentId = data.id;
                this.pNode = data;
            },
            //添加最高父级节点
            openParentAdd(data) {
                this.addTitle = "添加第一父级";
                this.addDialogVisible = true;
                this.addForm.parentId = 0;
            },
            //点击删除按钮
            async delNode(node, data) {
              this.$confirm('是否刪除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
                }).then(() => {
                menuApi.deleteMenu(node.data.id).then(res => {
                    Message.success(res.message)
                    this.getMenuTree()
                })
              })
            },
            //发送添加节点请求
            async addNode() {
                this.$refs.addFormRef.validate(async valid => {
                    if (!valid) {
                        return;
                    } else {
                        menuApi.addMenu(this.addForm).then(res => {
                            Message.success(res.message)
                            this.getMenuTree()
                            this.addDialogVisible = false
                        })
                    }
                });
            },
             //更新菜单
            async updateMenu() {
                this.$refs.editFormRef.validate(async valid => {
                    if (!valid) {
                        return;
                    } else {
                      menuApi.update(this.editForm).then(res => {
                        Message.success(res.message)
                        this.getMenuTree()
                        this.editlogVisible = false
                      })
                    }
                });
            },
            //点击编辑节点
            async edit(data) {
              this.editTitle = "编辑：【" + data.menuName + "】";
              menuApi.viewMenu(data.id).then(res => {
                 this.editForm = res.data.data
                 this.editlogVisible = true
              })


            },
        }
    };
</script>

<style>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>